<template>
  <div class="blog_container" id="blog_container">
    <div class="back">
      <img src="../assets/back.png" @click="back()">
    </div>
    <div class="like">
      <img src="../assets/click.png" @click="like()">
    </div>
    <div class="goTop">
      <el-button class="el-icon-caret-top" @click="backTop" circle ></el-button>
    </div>
    <el-card class="blog" v-if="Object.keys(blogs).length !== 0">
        <header>
            <h1 class="art-title">{{ blogs.blog.title }}</h1>
            <h4 style="display: flex;text-align: center">
                <div class="art-author"><i class="el-icon-user-solid"></i>: {{blogs.blog.author}}</div>
                <div class="art-time"><i class="el-icon-time"></i>：{{blogs.blog.createTime}}</div>
                <div class="art-classification"><i class="el-icon-s-flag"></i>：{{blogs.typeName}}</div>
                <div class="art-view"><i class="el-icon-view"></i>{{blogs.blog.views}}</div>
                <div class="art-like"><img style="margin-right: 5px" width="15px" height="15px" src="https://wygandwdn.cn/like.png" @click="like()">{{blogs.blog.likes}}</div>
                <div><i class="el-icon-chat-dot-square"></i>{{blogs.commentNumber}}</div>
            </h4>
        </header>
        <div class="content" v-highlight>
          <mavon-editor v-model="blogs.blog.content"
            :subfield="false"
            :boxShadow="false"
            defaultOpen="preview"
            :toolbarsFlag="false"
            previewBackground="#ffffff"
          />
        </div>
        <div style="display: flex;margin-top: 1%;">
          <el-row  v-for="(tag,key) in blogs.tagNames" :key="key" style="margin-right: 3px">
            <el-tag :type="tagType[key%5]" style="margin-right: 10px">{{tag}}</el-tag>
          </el-row>
        </div>
    </el-card>
    <el-card class="comment" id="comment">
      <div style="margin-bottom:10px">
        <span style="font-weight: bold;">评论列表</span>
      </div>
      <div class="userInfo">
        <el-input v-model="comment.author" class="nickname" placeholder="请输入昵称" prefix-icon="el-icon-user"></el-input>
        <el-input v-model="comment.email" class="email" placeholder="请输入邮箱" prefix-icon="el-icon-message"></el-input>
      </div>
      <div class="leave">
        <div>
          <el-input
            type="textarea"
            :placeholder="placeHolder"
            class="publish_comment"
            rows="8"
            resize="none"
            v-model="comment.content">
          </el-input>
        </div>
      </div>
      <div class="info">
        <el-button size="mini" v-show="btnVisible" @click="cancelReply()">取消回复</el-button>
        <el-button style="width: 20%" type="primary" plain @click="publish()">发布</el-button>
      </div>
      <span v-show="visible" style="font-weight: bold;">该博客下暂无评论,快来评论吧!</span>
      <div class="blog_comment" v-for="(item, key) in blogs.comments" :key="key">
        <div class="father">
            <div class="tmsg-commentshow">
                <el-row class="tmsg-commentlist">
                    <el-col class="tmsg-c-item">
                        <article class="">
                            <header style="display: flex">
                              <div>
                                <el-avatar class="avatar" :src="item.information.avatar"></el-avatar>
                              </div>
                              <div>
                                <div class="i-name">{{item.information.author}}</div>
                                <span @click="reply(item.information.id, item.information.author)"
                                  style="margin-left:20px;font-size: 13px;color:#64609E;cursor: pointer">回复</span>
                                <span style="margin-left:20px;font-size: 15px;cursor: pointer">{{key + 1}}楼</span>
                                <div class="i-time">
                                    <time>{{item.information.createTime}}</time>
                                </div>
                                <div>
                                  <p>{{item.information.content}}</p>
                                </div>
                              </div>
                            </header>
                        </article>
                    </el-col>
                    <div class="son" v-for="(child,key) in item.childrenInformation" :key="key">
                      <el-col class="tmsg-c-item">
                        <article class="">
                          <header style="display: flex">
                            <div>
                              <el-avatar class="avatar" :src="child.avatar"></el-avatar>
                            </div>
                            <div>
                              <div class="i-name">{{child.author}}<span style="color: #3399ea;margin-left: 20px">{{child.reply}}</span></div>
                              <span @click="reply(item.information.id, child.author)"
                                  style="margin-left:20px;font-size: 13px;color:#64609E;cursor: pointer">回复</span>
                              <div class="i-time">
                                <time>{{child.create_time}}</time>
                              </div>
                              <div>
                                <p>{{child.content}}</p>
                              </div>
                            </div>
                          </header>
                        </article>
                      </el-col>
                    </div>
                </el-row>
            </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import axios from 'axios'
export default {
  data () {
    return {
      comment: {
        email: '',
        author: '',
        content: '',
        parent_id: '',
        reply: '',
        blogId: this.$route.params.id,
        ip: ''
      },
      btnVisible: false,
      placeHolder: '说点什么呢``',
      commentList: [],
      blogs: [],
      tagType: ['', 'success', 'info', 'warning', 'danger'],
      visible: false,
      ip: ''
    }
  },
  components: {
    mavonEditor
  },
  methods: {
    getIPAddress () {
      this.$axios.get('https://myip.ipip.net/').then(
        response => {
          const pattern = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
          const text = pattern.exec(response.data)
          this.$set(this, 'ip', text[0])
          this.updateViews()
        }
      )
    },
    getBlog () {
    var that = this;
       axios({ 
        method: "GET",
        url: '/blog/getBlogById',
        params:{
          id: that.$route.params.id
        },
        }).then(function (res) {
          //console.log(res.data.data)
        that.blogs = res.data.data;
         if (that.blogs.comments.length === 0) {
          that.visible = true
        } else {
          that.visible = false
        }
        }).catch(error => {
        console.log(error)
      });  
    },
    getComment () {
      var that = this;
       axios({ 
        method: "GET",
        url: '/comment/getComments',
        params:{
          blogId: that.$route.params.id
        },
        }).then(function (res) {
        //console.log(res.data.data)
        that.commentList = res.data.data;
        }).catch(error => {
        console.log(error)
      });  
    },
    publish () {
      if (this.comment.author.match(/^[ ]*$/)) {
        this.comment.author = '匿名'
      }
      if (this.comment.email.match(/^[ ]*$/)) {
        this.comment.email = '#'
      }
      if (this.comment.content.match(/^[ ]*$/)) {
        this.$message.warning('请输入评论内容')
      } else {
        this.comment.ip = this.ip
        this.$axios.post('/comment/publishComment', this.comment).then(response => {
          console.log(this.comment)
          if (response.data.code !== '200') this.$message.error(response.data.msg)
          this.$message.success(response.data.msg)
          this.getComment()
          this.comment.content = ''
          this.comment.author = ''
          this.comment.email = ''
        })
      }
    },
    reply (pid, nickname) {
      this.comment.parent_id = pid
      this.comment.reply = '@' + nickname
      this.placeHolder = '@' + nickname
      document.getElementById('comment').scrollIntoView()
      this.btnVisible = true
    },
    cancelReply () {
      this.btnVisible = false
      this.comment.parent_id = ''
      this.comment.reply = ''
      this.placeHolder = ''
    },
    backTop () {
      document.getElementById('blog_container').scrollIntoView()
    },
    back () {
      this.$router.go(-1)
    },
    like () {
      var that = this;
       axios({ 
        method: "GET",
        url: '/blog/updateLikes',
        params:{
          id: that.$route.params.id,
          ipAddress: that.ip
        },
        }).then(function (res) {
          console.log(res.data.status)
         if (res.data.status !== '200') {
           that.$message.error(res.data.data)
           }
         else {
           that.$message.success(res.data.data)
           }
        }).catch(error => {
        console.log(error)
      });  
    },
    updateViews () {
      this.$axios.get('/blog/updateViews', {
        params: {
          id: this.$route.params.id,
          ipAddress: this.ip
        }
      }).then(response => {
        // console.log(response.data.msg)
      })
    }
  },
  created () {
  },
  destroyed () {
  },
  mounted () {
    this.getIPAddress()
    this.getBlog()
    
    
  }
}
</script>

<style lang="less" scoped>
.blog{
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 30px;
  width: 70%;
}
.art-title {
  padding-left: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 30px;
}
.art-title:hover {
padding-left: 10px;
color: #409EFF;
}
.art-time {
margin-right: 20px;
}
.art-author {
margin-left: 10px;
margin-right: 20px;
}
.art-classification{
  margin-right: 20px;
}
.art-like{
  margin-right: 20px;
}
.art-view{
  margin-right: 20px;
}
.comment{
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 70%;
}
.info{
  margin-bottom: 20px;
  justify-content: flex-end;
  display: flex;
}
.userInfo{
  margin-bottom: 20px;
}
.nickname{
  width: 30%;
}
.email{
  width: 30%;
  margin-left: 1%;
  margin-right: 1%;
}
.publish_comment{
  width: 100%;
  height: 200px;
  text-align: center;
}
.tmsg-commentlist {
    margin-bottom:20px;
}
.tmsg-commentshow>.tmsg-commentlist{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-c-item{
    border-top: 1px solid #e5eaed;
}
.tmsg-c-item article{
    margin:20px 0;
}
.tmsg-c-item article header{
    margin-bottom:10px;
}
.tmsg-c-item article header img:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
.i-name{
    font-size: 14px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
}
.tmsg-c-item article header .i-class{
    display: inline-block;
    margin-left:10px;
    background: #dff0d8;
    color:#3c763d;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
}
.i-time{
    color:#aaa;
    font-size: 12px;
}
.tmsg-c-item article section{
    margin-left: 80px;
}
.tmsg-c-item article section p img{
    vertical-align: middle;
}
.avatar {
  cursor: pointer;
}
.son{
  margin-left: 40px;
}
.like{
  position: fixed;
  margin-left: 11.2%;
  margin-top: 14%;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  padding: 5px;
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.back{
  position: fixed;
  margin-left: 11.2%;
  margin-top: 10%;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  padding: 5px;
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.goTop{
  position: fixed;
  margin-left: 91%;
  margin-top: 32%;
  el-button {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>
